<template>
    <div>
        <!-- //查询 -->
        <el-form :label-position="labelPosition" :model="prInfo" class="top">
              <el-col :span="1">&nbsp;&nbsp;&nbsp;</el-col>
              <el-col :span="10">
                    <linkage 
                    v-on:listenProvince="showProvince"
                    v-on:listenCity="showCity"
                    v-on:listenRegion="showRegion">
                    </linkage>
               </el-col>     
               <el-col :span="10" class="linkage1">
                    <div>
                    <el-select placeholder="请选择经验" filterable size="small" v-model="prInfo.experience">
                        <el-option label="" value="不限"></el-option>
                        <el-option label="在校生" value="在校生"></el-option>
                        <el-option label="应届生" value="应届生"></el-option>
                        <el-option label="3~5年" value="3~5年"></el-option>
                        <el-option label="5年以上" value="5年以上"></el-option>
                    </el-select>
                    </div>
                    <div>
                    <el-select placeholder="请选择学历"  filterable size="small" v-model="prInfo.education">
                        <el-option label="" value="不限"></el-option>
                        <el-option label="中专" value="中专"></el-option>
                        <el-option label="大专" value="大专"></el-option>
                        <el-option label="本科" value="本科"></el-option>
                        <el-option label="研究生" value="研究生"></el-option>
                        <el-option label="博士" value="博士"></el-option>
                    </el-select>
                    </div>
                    <div>
                    <el-select placeholder="请选择薪资范围" filterable size="small" v-model="prInfo.salary">
                       <el-option label="" value="不限"></el-option>
                       <el-option label="3k~5k" value="3k~5k"></el-option>
                       <el-option label="5k~7k" value="5k~7k"></el-option>
                       <el-option label="7k~10k" value="7k~10k"></el-option>
                       <el-option label="10k~15k" value="10k~15k"></el-option>
                    </el-select>
                    </div>
                     <div>
                    <!-- <el-select placeholder="请选择发布时间" filterable size="small" v-model="prInfo.time">
                       <el-option label="" value="不限"></el-option>
                       <el-option label="2022年" value="2022年"></el-option>
                       <el-option label="2021年" value="2021年"></el-option>
                       <el-option label="2020年" value="2020年"></el-option>
                    </el-select> -->
                    </div>
             </el-col> 
             <el-col :span="3">
                 <el-button type="primary" class="search" @click="searchR(1,100)">查询</el-button>
             </el-col>
        </el-form>
        <!-- //招聘信息 -->
        <h1 class="nocontent"></h1>
        <div class="zhaopin" v-for="item in info" :key="item.gmtCreate">
          <el-row class="one">
            <el-col :span="12">
                <div class="left">
                    <label class="name">{{item.job}}</label>
                    <label class="name">{{item.emptype}}</label>
                    <label class="name">[{{item.province}}-{{item.city}}]</label>
                    <br>
                    <label class="salary">{{item.salary}}/月</label>
                    <label class="aa">{{item.jobsepecial}}</label>
                    <label class="aa">{{item.education}}</label>
                    <label class="aa dd" @click.once="sendResume(item.id)">立即沟通</label>
                </div>
            </el-col>
            <el-col :span="12">
                <div>
                    <label class="name bb">{{item.companyname}}</label>
                    <br>
                    <label class="aa">经验：{{item.jobexp}}</label>
                    <label class="aa">{{item.jobdescription}}</label>
                    <label class="aa">{{item.companycomment}}</label>
                </div>
            </el-col>
          </el-row>
          <el-row class="dixia">
              <el-col :span="12">
                <label class="aa">发布时间：{{item.gmtCreate}}</label>
              </el-col>
              <el-col :span="12">
               <label class="aa">{{item.region}} - {{item.address}}</label>
              </el-col>
          </el-row>
        </div>
    </div>
</template>

<script>
import linkage from '@/components/linkage'
export default {
    name:'PersonalRInfo',
    components:{
        linkage
    },
    data(){
        return{
            labelPosition: 'left',
            prInfo: {
                province:'',
                city:'',
                region:'',
                education:'',
                experience:'',
                salary:'',
                time:''
            },
            info:[]
        }
    },
    methods:{
        searchR(current1,limit1){
            let prInfo = this.prInfo
            console.log("!!!",prInfo.education);
            depot.post({
                url: 'empservice/getjob/pageJobCondition/'+current1+"/"+limit1,
                data:{
                    "city": prInfo.city,
                    "education": prInfo.education,
                    "jobspecial": "",
                    "province": prInfo.province,
                    "publishtime": prInfo.time,
                    "region": prInfo.region,
                    "salaryRequire": prInfo.salary,
                    "workexp": prInfo.experience
                },
                cb: (res)=> {
                    console.log("查找的招聘信息",res.data.records);
                   
                    if(res.data.total==0){
                        document.querySelector(".nocontent").innerHTML = "抱歉，系统查询不到该招聘信息！"
                        this.info = ''
                    }else{
                        document.querySelector(".nocontent").innerHTML = ""
                        let infor = res.data.records;
                        this.info = infor
                        // console.log(this.info);
                    }
                }
                })
        },
        personalinfor(current,limit){
           depot.post({
                url: 'empservice/getjob/pageJobCondition/'+current+"/"+limit,
                data:{
                    "city": "",
                    "education": "",
                    "jobspecial": "",
                    "province": "",
                    "publishtime": "",
                    "region": "",
                    "salaryRequire": "",
                    "workexp": ""
                },
                cb: (res)=> {
                    console.log("招聘信息",res.data.records);
                    let infor = res.data.records;
                    this.info = infor
                    // console.log(this.info);
                }
                })
        },
         //组件传值（子传父）
        showProvince(data){
          this.prInfo.province = data;
          console.log("工作省份：",this.prInfo.province);
        },
        showCity(data){
            this.prInfo.city = data;
            console.log("工作城市：",this.prInfo.city);
        },
        showRegion(data){
            this.prInfo.region =data;
            console.log("工作县区：",this.prInfo.region);
        },
        //发送简历
        sendResume(id){
           console.log("招聘信息id",id);
            depot.get({
            url: "/empservice/link/sendResume/"+id,
            cb: (res)=> {
                console.log("发送简历:",res);
                alert(res.message)
              }
            })
        }
    },
    mounted:function(){
        this.personalinfor(1,500)
    }
}
</script>

<style lang="less" scoped>
.top{
    width: 100%;
    height: 80px;
    border-bottom:1px solid rgb(204, 203, 203) ;
}
.linkage1 {
    display: flex;
    .el-select{
    margin-right: 2px;
    }
}
.nocontent{
    text-align: center;
    color: #303030;
    font-size: 27px;
}
.search{
    line-height: 10px;
    margin-top: 2px;
    margin-left: 5%;
    width: 80%;
    height: 33px;
    border: none;
    border-radius: 8px;
    background-color: #07c4b0;
}
.salary{
    color: #ff6c36;
    font-size: 20px;
     margin-left: 15px;
}
.name{
    color: #07c4b0;
    font-size: 23px;
     margin-left: 15px;
}
.aa{
    color: #464e72;
    margin-left: 15px;
}
.bb{
    font-weight: bold;
    color: #0e2041;
}
.dd{
    color: rgb(90, 90, 90);
    font-weight: bold;
}
.dd:hover{
    color: #155ee6;
}
.dixia{
    width: 100%;
    background-color: #f8f9fd;
    margin-bottom: 10px;
}
</style>